<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    html {
        font-family: 'Nunito', sans-serif;
        height: 100%;
    }
    body {
        margin: 0px;
        height: 100%;
    }
    .wrapper {
        height: auto;
        min-height: 100%;
        overflow: hidden;

    }
    .side-menu {
        /*min-width: 250px;*/
        width: 250px;
        float: left;
        background: #32325d;
        height: auto;
        min-height: 100%;
        margin-bottom: -5000px; /* any large number will do */
        padding-bottom: 5000px;
    }
    .logo {
        background: #3a3a63;
        color: #ffffff;
        font-size: 24px;
        font-weight: bold;
        padding: 10px 0px 0px 10px;
        height: 45px;
    }
    a {
        text-decoration: none;
        color: #e1e2fa;
    }
    .menu ul {
        list-style-type: none;
        margin-left: 0px;
        padding-left: 10px;
    }
    .menu ul li a {
        font-size: 12px;
        font-weight: 800;
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        margin-left: -5px;
        padding-left: 10px;
    }
    .menu ul li a:hover {
        background: #262646;
        border-left: solid 5px #6a75eb;
        margin-left: -10px;
        width: 98%;
    }
    .menu ul li ul {
        padding-left:0px;
    }
    .topmenu{
        height: 45px;
        padding: 10px 0px 0px 10px;
        background: #6772e5;
        color: #e1e2fa;
    }







    .main-section {
        height: 100%;
    }

    #showmenu {
        font-size: 18px;
        display: inline-block;
        padding-left: 15px;
        padding-top: 5px;
        padding-right: 15px;
        float: left;
    //border-right: solid 1px #000;
    }
    .main-section{
        background: #f6f9fc;
        height:100%;
        margin-bottom: -5000px; /* any large number will do */
        padding-bottom: 5000px;
        margin-left: 250px;
    }
    .search {
        width: 340px;
        float: left;
        margin-top:3px;
        margin-left: 25px;
        padding-left: 10px;
        background: #5c66cd;
        padding-top: 3px;
        padding-bottom: 3px;
        border-radius: 15px;
        color: #8089e8;
    }
    input.src {
        background: none;
        border: none;
        width: 300px;
        font-family: 'Nunito', sans-serif;
        color: #8089e8;
        font-size: 13px;
        font-weight: 600;

    }
    *:focus {
        outline: none;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        font-family: 'Nunito', sans-serif;
        color: #8089e8;
        font-size: 13px;
        font-weight: 600;
    }
    ::-moz-placeholder { /* Firefox 19+ */
        font-family: 'Nunito', sans-serif;
        color: #8089e8;
        font-size: 13px;
        font-weight: 600;
    }
    :-ms-input-placeholder { /* IE 10+ */
        font-family: 'Nunito', sans-serif;
        color: #8089e8;
        font-size: 13px;
        font-weight: 600;
    }
    :-moz-placeholder { /* Firefox 18- */
        font-family: 'Nunito', sans-serif;
        color: #8089e8;
        font-size: 13px;
        font-weight: 600;
    }
    .card {
        margin: 25px;
        padding: 15px;
        width: 250px;
        background: #fff;
        float: left;
        box-shadow: 0 6px 20px 0px #dce8f4;
    }
    .card-content {
        color: #32325d;
        font-weight: 600;
        font-size: 18px;

    }
    .author {
        color: #999999;
        font-size: 36px;
        margin-top: 20px;

    }
    .status-green {
        width: 30px;
        height: 8px;
        border-radius: 10px;
        background: #23d2ac;
        margin-bottom: 15px;
    }
    .status-blue {
        width: 30px;
        height: 8px;
        border-radius: 10px;
        background: #33adff;
        margin-bottom: 15px;
    }
    .status-red {
        width: 30px;
        height: 8px;
        border-radius: 10px;
        background: red;
        margin-bottom: 15px;
    }
    .section-title {
        margin-left: 25px;
        margin-top: 10px;
        font-size: 24px;
        color: #3a3a63;
    }</style></head><body>


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<div class="wrapper">
    <div class="side-menu" style="width: 250px;">
        <div class="logo">配置中心</div>
        <div class="menu">
            <ul>
                <li><a href="#"><i class="fa fa-server" aria-hidden="true" style="display: none;"></i><span class="text" style=""> Projects </span></a>
                    <ul class="dropdown">
                        <li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true" style="display: none;"></i><span class="text" style="">平台</span></a></li>
                        <li><a href="#"><i class="fa fa-arrows-alt" aria-hidden="true" style="display: none;"></i><span class="text" style="">应用模块</span></a></li>
                        <li><a href="#"><i class="fa fa-desktop" aria-hidden="true" style="display: none;"></i><span class="text" style="">环境</span></a></li>
                        <li><a href="#"><i class="fa fa-calendar" aria-hidden="true" style="display: none;"></i><span class="text" style="">哈哈</span></a></li>
                        <li><a href="#"><i class="fa fa-mobile" aria-hidden="true" style="display: none;"></i><span class="text" style="">测试</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <div class="topmenu">
            <a href="#" id="showmenu"><i class="fa fa-bars" aria-hidden="true"></i></a>
            <div class="search"><i class="fa fa-search" aria-hidden="true"></i> <input class="src" placeholder="Search for cards..." type="text"></div>
        </div>
        <div class="main-section" style="margin-left: 250px;">
            <div class="section-title">Active Cards</div>
            <div class="card">
                <div class="status-green"></div>
                <div class="card-content">
                    This is one of the card subjects
                </div>
                <div class="author"><i class="fa fa-user-circle-o" aria-hidden="true"></i></div>
            </div>
            <div class="card">
                <div class="status-blue"></div>
                <div class="card-content">
                    This is one of the card subjects 2
                </div>
                <div class="author"><i class="fa fa-user-circle-o" aria-hidden="true"></i></div>
            </div>
            <div class="card">
                <div class="status-red"></div>
                <div class="card-content">
                    This is one of the card subjects 3
                </div>
                <div class="author"><i class="fa fa-user-circle-o" aria-hidden="true"></i></div>
            </div>
        </div>
    </div>
</div>


<script src="../scripts/jquery/2.1.3/jquery.js"></script>
<script>$(function(){
    $(".menu i").hide();
    $("#showmenu").click(function(){
        if($(".side-menu").width() > "60"){
            $(".side-menu").animate({width: '-=205px'});
            $(".main-section").animate({'margin-left': '-=205px'});
            $(".logo").text("C");
            $("span.text").hide();
            $(".menu i").show();

        }
        else {
            $(".side-menu").animate({width: '+=205px'});
            $(".main-section").animate({'margin-left': '+=205px'});
            $(".logo").text("配置中心");
            $("span.text").show("slow");
            $(".menu i").hide();
        }

    });

});
</script>
</body>
</html>